<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue常用指令</title>
    <style>
        .first {
            color: red;

        }
        .second{
            size: 50px;

        }
    </style>
</head>
<body>
    <script src="/js/vue.js"></script>
    <div id="app">
        <!-- 1 mustache用法，胡子语法，插值语法{{}}-->
        <p>{{msg}}</p>
        
        <!--  2 v-once 只渲染一次  render-->
        <p v-once>{{msg}}</p>
        <!--3 v-pre 取消渲染  -->
        <p v-pre>{{msg}}</p>
        <!--4 v-text 在DOM元素中插入文本内容，会替换DOM元素中内容  -->
        <p v-text="message">{{msg}}11111111111111123123</p>
        <!--5 v-html 用于输出元素的html内容，如果数据中包含html标签，将html标签解析后再输出-->
        <div v-html="myHtml"></div>
        <!--6 v-bind  数据绑定 -->
        <!--v-bind: 指令可以简写成":"语法糖就是简写 -->
        <a v-bind: href="myUrl">baidu</a>
        <a : href="myUrl">baidu</a>
        <!--6 v-bind  动态绑定 class属性 对象语法 class里面放一个对象-->
        <p class="first second">{{msg}}</p>

    </div>

    <script>
        let app =new Vue({
          
            el:"#app",
            data:{
                msg:'hello world',
                message:"hello ",
                myHtml:`<h1>kitty</h1>`,
                myUrl:'www.baidu.com'
            }
        })
    </script>
</body>
</html>